<template>
  <div class="deliverySetting">
    <div class="block">
      <el-tree
        :data="data"
        :expand-on-click-node="false"
        show-checkbox
        node-key="id"
        default-expand-all>
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span>
            <el-button type="text" size="mini" @click="add(data)">添加</el-button>
            <el-button type="text" size="mini" @click="edit(data)">修改</el-button>
            <el-button type="text" size="mini" @click="() => del(node, data)">删除</el-button>
          </span>
        </span>
      </el-tree>
    </div>

    <!-- 添加弹窗 -->
    <el-dialog :visible.sync="dialogFormVisible" title="添加" style="width: 50%; margin: 10vh auto">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="名称">
          <el-input v-model="form.name" autocomplete="off" style="width: 80%"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="append()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除弹窗 -->
    <el-dialog :visible.sync="dialog" title="删除" style="width: 50%; margin: 10vh auto">
      <p>您确定要删除此项吗?</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="remove()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="修改" style="width: 50%; margin: 10vh auto">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="名称">
          <el-input v-model="form2.name" autocomplete="off" style="width: 80%"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let id = 1000
export default {
  name: 'Tree',
  data() {
    return {
      data: [{
        id: 1,
        label: '水果',
        children: [{
          id: 4,
          label: '南方水果',
          children: [{
            id: 9,
            label: '杨桃'
          }, {
            id: 10,
            label: '山竹'
          }]
        }]
      }, {
        id: 2,
        label: '蔬菜',
        children: [{
          id: 5,
          label: '白菜'
        }, {
          id: 6,
          label: '萝卜'
        }]
      }, {
        id: 3,
        label: '甜点',
        children: [{
          id: 7,
          label: '蛋糕'
        }, {
          id: 8,
          label: '面包'
        }]
      }],
      dialogFormVisible: false,
      dialogVisible: false,
      dialog: false,
      formLabelWidth: '120px',
      form: {
        name: ''
      },
      addData: null, // 存放添加数据
      node: null,
      delData: null,
      form2: {
        name: ''
      },
      editData: null // 存放修改数据
    }
  },
  methods: {
    // 添加弹窗
    add(data) {
      const self = this
      self.dialogFormVisible = true
      self.addData = data
    },
    // 添加
    append() {
      const self = this
      if (self.form.name !== '') {
        const newChild = { id: id++, label: self.form.name, children: [] }
        if (!self.addData.children) {
          this.$set(self.addData, 'children', [])
        }
        self.addData.children.push(newChild)
        self.dialogFormVisible = false
        self.form.name = ''
      } else {
        this.$message.error('不能为空!')
      }
    },
    // 删除
    del(node, data) {
      const self = this
      self.dialog = true
      self.node = node
      self.delData = data
    },
    // 删除
    remove() {
      const self = this
      const parent = self.node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === self.delData.id)
      children.splice(index, 1)
      self.dialog = false
    },
    // 修改
    edit(data) {
      const self = this
      self.dialogVisible = true
      self.form2.name = data.label
      self.editData = data
    },
    sureEdit() {
      const self = this
      if (self.form2.name !== '') {
        this.treeForeach(self.data, node => {
          // console.log(node)
          if (node.id === self.editData.id) {
            // console.log(node.label)
            node.label = self.form2.name
          }
        })
        self.dialogVisible = false
      } else {
        this.$message.error('不能为空!')
      }
    },
    treeForeach(tree, func) {
      tree.forEach(data => {
        data.children && this.treeForeach(data.children, func) // 遍历子树
        func(data)
      })
    }
  }
}
</script>

<style scoped>
.deliverySetting {
  background-color: #fff;
  padding: 30px 20px 20px 20px;
  height: 80vh;
}
.deliverySetting >>> .el-tree-node__content {
  height: 35px!important;
}
</style>
